<!--
Created by IntelliJ IDEA.
User: iulianacosmina
Date: 2019-07-14
Time: 11:43
-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head th:replace="~{templates/layout :: pageTitle('Search Singer Page')}"></head>

<body>
<div class="container">
    <header th:replace="~{templates/layout :: pageHeader}" ></header>

    <header th:replace="~{templates/layout :: pageMenu}" ></header>

    <section th:fragment="~{templates/layout :: pageContent}">
        <div class="content">  <!-- content -->
            <h4 th:text="#{command.search} + ' ' + #{singer.title}">SEARCH</h4>

            <div class="container col-lg-12">
                <form action="#" th:action="@{/singers/go}" name="search" th:object="${criteriaDto}" method="post" class="col p-4" id="singerSearchForm">

                    <div class="row mb-1">
                        <label for="fieldName" th:text="#{label.Criteria.fieldname} + ':'" class="col-sm-4 form-label">FN:</label>
                        <div class="col-sm-8">
                            <select th:field="*{fieldName}" class="form-select">
                                <option th:value="firstName" th:text="#{label.Singer.firstname}">FN</option>
                                <option th:value="lastName" th:text="#{label.Singer.lastname}">LN</option>
                                <option th:value="birthDate" th:text="#{label.Singer.birthDate}">BD</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-1">
                        <label for="fieldValue" th:text="#{label.Criteria.fieldvalue} + ':'" class="col-sm-4 form-label"></label>
                        <div class="col-sm-8">
                            <div>
                                <input type="text" th:field="*{fieldValue}" class="form-control"/>
                                <small th:text="#{label.dateFormat.accepted}" class="text-mutes">ACC</small></div>
                        </div>
                    </div>

                    <div class="bs-component mb-1">
                        <input type="submit" th:value="#{command.search}" id="searchButton" class="btn btn-dark"/>
                        <div class="col-sm-8">
                            <small id="errMessage"></small>
                        </div>
                    </div>
                </form>
                <script th:inline="javascript">
                    /*<![CDATA[*/
                    $( window ).on( "load", function() {
                        $('#errMessage').hide();
                        $('#singerSearchResults').hide();
                    });
                    function renderSearchResults(singers) {
                        $('#errMessage').empty()
                        $('#errMessage').hide();
                        let content = '';
                        let baseDetailUrl = /*[[@{/singers/}]]*/ '/singers';
                        for (let i = 0; i < singers.length; i++) {
                            content += '<tr>';
                            content += '<td><a href="'+ baseDetailUrl + singers[i].id+'">'+singers[i].id+'</a></td>';
                            content += '<td>'+singers[i].firstName+'</td>';
                            content += '<td>'+singers[i].lastName+'</td>';
                        }
                        $('#singerSearchResults tbody').html(content);
                        if(content !== '') {
                            $('#singerSearchResults').show();
                        } else {
                            $('#singerSearchResults').hide();
                        }
                    }

                    $('#singerSearchForm').submit(function(evt){
                        evt.preventDefault();
                        let fieldName = $('#fieldName').val();
                        let fieldValue = $('#fieldValue').val();
                        let json = { "fieldName" : fieldName, "fieldValue" : fieldValue};

                        $.ajax({
                            url: $('#singerSearchForm')[0].action,
                            type: 'POST',
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(json),
                            success: function(responseData) { renderSearchResults(responseData);},
                            error: function(e) {
                                let jsonData = e.responseJSON;
                                for(let i in jsonData) {
                                    let key = i;
                                    let val = jsonData[i];
                                    $('#errMessage').append("<p class=\"error\">"+ val +"</p>");
                                }
                                $('#errMessage').show();
                            }
                        });
                    })
                    /*]]>*/
                </script>
                <table id="singerSearchResults" class="table table-hover">
                    <thead>
                    <tr>
                        <th th:text="#{label.Singer.count}" class="table-success">COUNT</th>
                        <th th:text="#{label.Singer.firstname}" class="table-success">FIRSTNAME</th>
                        <th th:text="#{label.Singer.lastname}" class="table-success">LASTNAME</th>
                    </tr>
                    </thead>
                    <tbody>
                        <th:block th:each="singer : ${singers}">
                            <td><a th:href="@{/singer/} + ${singer.id}" th:text="${singer.id}">ID</a></td>
                            <td th:text="${singer.firstName}">...</td>
                            <td th:text="${singer.lastName}">...</td>
                        </th:block>
                    </tbody>
                </table>
            </div>
        </div> <!-- content -->
    </section>

    <footer th:replace="~{templates/layout :: pageFooter}" ></footer>
</div>
</body>
</html>